<template>
  <div>
    <a-modal v-model="visible"  title="污染小类详情"  :width="1400" @cancel='cancel' @ok='sure'>
      <a-spin :spinning='loading' tip=" 正在加载数据，请耐心等待">
      <a-table
        ref='table'
        size='middle'
        bordered
        :rowKey="record => record.categoryId"
        childrenColumnName='childrenColumnName'
        :columns='columns'
        :dataSource='dataSource'
        :pagination="false"
      >
      <span slot='keyword' slot-scope='text, record'>
          <span v-if='text.children&&text.children.length===0'
                style='margin-left: 5px;color: #ff0000;cursor: pointer'>暂无</span>
          <span v-else
                v-for='(item,index) in text.children' :key='index'
                style='margin-left: 5px;color: #3399ff;cursor: pointer'><span
            v-show='index!=0'>
          </span>{{ item.keyName }}</span>
      </span>
      <span slot='action' slot-scope='text, record,index'>
          <a  @click='handleEdit(record)'>查看详情</a>
      </span>
      </a-table>
    </a-spin>
      <template slot="footer">
        <a-button @click="cancel">关闭</a-button>
      </template>

      <XfjStatisticsModal ref="xfjStatisticsModal" v-on:getCategoryStatistics="getCategoryStatistics"></XfjStatisticsModal>
    </a-modal>
  </div>
</template>

<script>
import EpaSortService from '@/myService/EpaSortService'
import XfjStatisticsModal from '@views/epa/epa-statistics/Modal/XfjStatisticsModal'

export default {
  name: 'KeyStatisticsQxModal',
  components:{
    XfjStatisticsModal
  },
  data() {
    return {
      visible:false,
      dataSource: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) => 1 + index
        },
        {
          title: '污染小类',
          dataIndex: 'categoryName',
          align: 'center'
        },
        {
          title: '关键字',
          align: 'center',
          key: 'keyword',
          width: 500,
          scopedSlots: { customRender: 'keyword' },
        },
        {
          title: '工单数',
          dataIndex: 'keyNum',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data:{
        "startDate":'',
        "endDate":'',
        "categoryId":''
      },
      startDate:'',
      endDate:'',
      item:{
        qx:'',
        qxId:'',
        startDate:'',
        endDate:''
      },
      loading:true
    }
  },
  created() {

  },
  methods:{
    handleEdit(record){
      console.log(record)
      this.item=record
      this.item.startDate=this.startDate
      this.item.endDate=this.endDate
      this.item.qxId=this.data.qxId
      this.item.qx=this.data.qx
      this.$refs.xfjStatisticsModal.open(this.item)
    },
    cancel(){
      this.visible=false
      this.$emit('getSortPolluteQx');
    },
    sure(){
      this.cancel()
    },
    open(record,startDate,endDate){
      this.loading=true
      this.visible=true
      this.startDate=startDate
      this.endDate=endDate
      this.data=record
      this.getCategoryStatistics()
    },
    getCategoryStatistics(){
      console.log(this.data)
      this.data.startDate=this.startDate
      this.data.endDate=this.endDate
      EpaSortService.getCategoryStatistics(this.data).then((res)=>{
        console.log(res)
        this.dataSource=res.result
      }).finally(
        ()=>{
          this.loading=false
        }
      )
    },
  }
}
</script>

<style scoped>

</style>